import React from 'react'
import { Layout, Menu } from 'antd'
import {withRouter} from 'react-router-dom'
import menuList from './menuList'
import {connect} from 'react-redux'

//解构
const {Sider} = Layout;
const {SubMenu} = Menu;

function SideMenu(props) {
    //权限设置时 某些权限是否有侧边栏
    const checkPagePermission =(item)=>{
        return item.pagepermission===1
    }
    const renderMenu = (menuList)=>{
        return menuList.map(item=>{
            if(item.children?.length>0 && checkPagePermission(item)){
                return <SubMenu key={item.key} icon={item.icon} title={item.title}> 
                    {renderMenu(item.children)}               
                </SubMenu>
            }

            return <Menu.Item key={item.key} icon={item.icon} 
                onClick={()=>{props.history.push(item.key)}} >
                {item.title}
            </Menu.Item>
        })
    }

    const selectKeys = [props.location.pathname]
    const openKeys = ["/" + props.location.pathname.split("/")[1]]
    return ( 
      //collapsible可收起  collapsed收起展开状态
        <Sider trigger={null} collapsible collapsed={props.isCollapsed} >
            <div className="logo" >卷王</div>
            <Menu theme="dark" mode="inline" 
                defaultSelectedKeys={selectKeys} 
                defaultOpenKeys={openKeys}
            >
                {
                    renderMenu(menuList)
                }
            </Menu>
        </Sider>
    )
}
const mapStateToProps = ({CollapsedReducer:{isCollapsed}})=>{
    return {
      isCollapsed
    }
  }
export default connect(mapStateToProps)(withRouter(SideMenu))
